<!--主页-->
<template>
  <div class="container">
    <el-container class="container">
      <!--头部-->
      <el-header>
        <el-row>
          <el-col :span="1">
            <img class="logo" src="../../static/images/logo.png">
          </el-col>
          <el-col :span="2">
            <h3 style="color: #003366">宠达 <small>PetsDar</small></h3>
          </el-col>
          <el-col :span="2" :offset="17" style="text-align: right">
            <img class="profilePhoto" src="../../static/images/profilePhoto.jpg">
          </el-col>
          <el-col :span="2">
            <!--<span style="color: #999999">admin <i class="el-icon-caret-bottom"></i></span>-->
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{userName}} <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" style="margin-top: -4px; width: 150px">
                <el-dropdown-item icon="el-icon-user-solid" style="color: #003366; padding-left: 30px" @click.native="myCenter()">个人中心</el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-help" style="color: #003366; padding-left: 30px" @click.native="loginOut()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container style="margin-top: 60px">
        <!--侧边栏-->
        <el-aside width="22%">
          <transition name="el-fade-in-linear">
            <div v-show="show1" class="asideLine" style="background-color: #23b7e5"></div>
          </transition>
          <transition name="el-fade-in-linear">
            <div v-show="show2" class="asideLine" style="background-color: #e36159; margin-top: 56px"></div>
          </transition>
          <transition name="el-fade-in-linear">
            <div v-show="show3" class="asideLine" style="background-color:#7266ba; margin-top: 112px"></div>
          </transition>
          <transition name="el-fade-in-linear">
            <div v-show="show4" class="asideLine" style="background-color:#99CC33; margin-top: 168px"></div>
          </transition>
          <div class="pets">
            <img class="petsImg" src="../../static/images/pets.png">
          </div>
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                background-color="#003366"
                text-color="#fff"
                active-text-color="#ffd04b"
                :default-active= "$route.path"
                :default-openeds = "['4']">
                <el-menu-item index="/index/main" class="fixMarginPadding" @click="indexP">
                  <i class="el-icon-menu"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="/index/chain" class="fixMarginPadding" @click="chainP">
                  <i class="el-icon-s-shop"></i>
                  <span slot="title">店铺管理</span>
                </el-menu-item>
                <el-menu-item index="/index/power" class="fixMarginPadding" @click="userP">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">权限管理</span>
                </el-menu-item>
                  <el-submenu index="4" class="fixMarginPadding">
                    <template slot="title">
                      <i class="el-icon-s-cooperation"></i>
                      <span>资料管理</span>
                    </template>
                    <transition name="el-collapse-transition">
                    <el-menu-item-group style="margin-top: -15px">
                      <el-menu-item class="item-background" index="/index/emp" @click="empP">员工管理</el-menu-item>
                      <el-menu-item class="item-background" index="/index/dep" @click="depP">部门管理</el-menu-item>
                      <el-menu-item class="item-background" index="/index/pos" @click="posP">职位管理</el-menu-item>
                    </el-menu-item-group>
                    </transition>
                  </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Index",
    data(){
      return{
        show1: true, // 控制侧边栏的黄条
        show2: false,
        show3: false,
        show4: false,
        userName: ''
      }
    },
    beforeRouteEnter(to, from, next){
      next(vm => {
        vm.userName = localStorage.getItem("userName");
      });
    },
    mounted(){
      if(this.$route.path == '/index/main'){
        this.show1=true,this.show2=false,this.show3=false,this.show4=false;
      }else if(this.$route.path == '/index/chain'){
        this.show1=false,this.show2=true,this.show3=false,this.show4=false;
      }else if(this.$route.path == '/index/mycenter'){
        this.show1=false,this.show2=false,this.show3=false,this.show4=false;
      }else if(this.$route.path == '/index/power'){
        this.show1=false,this.show2=false,this.show3=true,this.show4=false;
      }else if(this.$route.path == '/index/emp'){
        this.show1=false,this.show2=false,this.show3=false,this.show4=true;
      }else if(this.$route.path == '/index/dep'){
        this.show1=false,this.show2=false,this.show3=false,this.show4=true;
      }else if(this.$route.path == '/index/pos'){
        this.show1=false,this.show2=false,this.show3=false,this.show4=true;
      }else {
        this.show1=false,this.show2=false,this.show3=false,this.show4=false;
      }
    },
    methods: {
      myCenter(){
        this.show1=false,this.show2=false,this.show3=false,this.show4=false;
        this.$router.push({
          name: "mycenter"
        });
      },
      loginOut(){
        this.axios({
          url: '/api/loginout',
          method: "post",
          data: JSON.stringify({
            passID: sessionStorage.getItem('passID')
          }),
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          }
        }).then((response)=>{
          localStorage.removeItem("userName");
          sessionStorage.removeItem('passID');
          if(response.data.statusCode == "200"){
            this.$router.push({
              name: 'login'
            });
          }else {
            this.$router.push({
              name: 'login'
            });
          }
        });
      },
      indexP(){
        this.show1=true,this.show2=false,this.show3=false,this.show4=false;
        this.$router.push({
          name: "main"
        });
      },
      chainP(){
        this.show1=false,this.show2=true,this.show3=false,this.show4=false;
        this.$router.push({
          name: "chain"
        });
      },
      userP(){
        this.show1=false,this.show2=false,this.show3=true,this.show4=false;
        this.$router.push({
          name: 'power'
        })
      },
      empP(){
        this.show1=false,this.show2=false,this.show3=false,this.show4=true;
        this.$router.push({
          name: 'emp'
        })
      },
      depP(){
        this.show1=false,this.show2=false,this.show3=false,this.show4=true;
        this.$router.push({
          name: 'dep'
        })
      },
      posP(){
        this.show1=false,this.show2=false,this.show3=false,this.show4=true;
        this.$router.push({
          name: 'pos'
        })
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .el-header {
    color: #333;
    position: fixed;
    background-color: white;
    width: 100%;
    text-align: center;
    line-height: 60px;
    box-shadow: 0 1px 5px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  .el-aside {
    box-shadow: 6px 0 3px -2px rgba(0,0,0,0.3);
    background-color: #003366;
    z-index: 1;
  }

  .el-main {
    background-color: #f2f3f4;
    color: #333;
    text-align: center;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-col{
    height: 60px;
  }

  .logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 5px
  }

  .profilePhoto {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    border: 1px black solid;
    margin-top: 12px
  }

  .tac{
    background-color: #003366;
    width: 100% !important;
  }

  .el-dropdown-link {
    cursor: pointer;
  }

  .fixMarginPadding{
    margin: 0px;
    padding: 0px;
    text-align: left
  }

  .el-submenu{
    background: #003366;
  }

  .el-menu{
    border-right: none;
  }

  .item-background{
    background: #002952!important;
  }

  .item-background:hover{
    color: #ffd04b!important;
  }

  .el-col-24{
    width: 100%!important;
  }

  .asideLine{
    background-color: #ffd04b;
    height: 55px;
    width: 5px;
    position: absolute;
    z-index: 1
  }

  .pets{
    bottom: 0px;
    position: fixed;
    width: 22%;
    height: 135px;
    overflow: hidden;
  }

  .petsImg{
    width: 100%;
  }

</style>
